<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="账号" prop="mailboxAccount">
        <el-input v-model="queryParams.mailboxAccount" placeholder="请输入账号" :clearable="true" />
      </el-form-item>
      <el-form-item label="显示名称" prop="showName">
        <el-input v-model="queryParams.showName" placeholder="请输入显示名称" :clearable="true" />
      </el-form-item>
      <el-form-item label="发信名称" prop="sendName">
        <el-input v-model="queryParams.sendName" placeholder="请输入发信名称" :clearable="true" />
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['mailbox:mailboxAccount:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['mailbox:mailboxAccount:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="MailboxAccount"
      height-per="90"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          @click="handleMenuUpdate(row)"
          v-hasPermi="['mailbox:mailboxAccount:update']"
        />
        <context-menu-item
          label="删除"
          @click="handleMenuDeleted(row)"
          v-hasPermi="['mailbox:mailboxAccount:deleted']"
        />
      </template>
    </Table>
  </ContentWrap>
  <MailboxAccountEdit ref="editFormRef" @success="mailboxAccountEditSuccess" />
  <DownloadMailHeader ref="downloadMailHeaderRef" />
</template>
<script setup name="MailboxAccount" lang="ts">
import * as AccountApi from '@/api/mailbox/mailboxAccount'
import MailboxAccountEdit from '@/views/mailbox/mailboxAccount/MailboxAccountEdit.vue'
import { DICT_TYPE, getDictObj } from '@/utils/dict'
import * as UserApi from '@/api/system/user/user'
import DownloadMailHeader from './DownloadMailHeader.vue'
const userList = ref<UserApi.UserVO[]>([])
const message = useMessage() // 消息弹窗
const editFormRef = ref()
const downloadMailHeaderRef = ref()
const queryFormRef = ref()
const queryParams = ref({
  mailboxAccount: undefined,
  showName: undefined,
  sendName: undefined
})
const queryData = ref()
const columns = [
  {
    label: '账号',
    prop: 'mailboxAccount'
  },
  {
    label: '显示名称',
    prop: 'showName'
  },
  {
    label: '发信名称',
    prop: 'sendName'
  },
  {
    label: '邮箱类型',
    prop: 'mailboxProtocolType',
    formatter: ({ mailboxProtocolType }) =>
      getDictObj(DICT_TYPE.MAILBOX_PROTOCOL, mailboxProtocolType).label
  },
  {
    label: '拥有人',
    prop: 'ownerId',
    formatter: ({ ownerId }) => userList.value.find((obj) => obj.id === ownerId)?.nickname
  },
  {
    label: '创建时间',
    prop: 'createTime'
  },
  {
    label: '更新时间',
    prop: 'updateTime'
  }
]
/** 初始化 */
onMounted(async () => {
  userList.value = await UserApi.listAllSimple()
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增按钮操作 */
const handleClickCreate = () => {
  editFormRef.value.open('create', 0)
}

// const handleClickWebsocket = () => {
//   downloadMailHeaderRef.value.open(10)
// }

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await AccountApi.pageQuery(queryParams.value)
}

/** 处理table行双击事件 */
const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理右击事件 修改 */
const handleMenuUpdate = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理右击事件 删除 */
const handleMenuDeleted = async (row) => {
  await message.confirm('确认要删除此邮箱吗？')
  await AccountApi.deleted(row.id)
  await message.success('删除成功')
  getPage()
}

const mailboxAccountEditSuccess = (accountId) => {
  if (accountId != 0) downloadMailHeaderRef.value.open(accountId)
  getPage()
}
</script>
